<template>
    <div class="confirmOrder">
        <el-row class="rowHeather">
            <el-col :span="8">
                <label>系统商品</label>
            </el-col>
            <el-col :span="4">
                <label>服务方式</label>
            </el-col>
            <el-col :span="4">
                <label>单价</label>
            </el-col>
            <el-col :span="4">
                <label>数量</label>
            </el-col>
            <el-col :span="4">
                <label>小计</label>
            </el-col>
        </el-row>

        <div class="systemWarp" v-if="orderList.length>0" v-for="(items, index) in orderList" :key="index">
            <div class="system" v-for="(list, index) in items.titleList" :key="index">
                <div class="systemName">
                   <label>{{list.titleList}}</label>
                </div>

                <el-row class="type-row"  v-for="(child, index) in list.children" :key="index">
                    <el-col :span="8">
                        <div class="cover">
                            <el-checkbox v-if="false" style="margin-right: 20px;"></el-checkbox>
                            <el-image :src="child.commodityImgurl?imgBaseUrl+child.commodityImgurl:src"></el-image>
                        </div>
                        <div class="textDeteil">
                            <h3>{{child.detailName?child.detailName:child.prodectName}}</h3>
                            <p v-if="child.stageName||child.subjectName">
                                <label>{{child.gradeName}}</label>
                                <el-divider direction="vertical"></el-divider>
                                <label>{{child.volumeName}}</label>
                                <el-divider direction="vertical"></el-divider>
                                <label>{{child.subjectName}}</label>
                                <el-divider direction="vertical"></el-divider>
                                <label>{{child.versionName}}</label>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="vertical">
                            <label v-if="child.beOverdue === 1">免费</label>
                            <label v-if="child.beOverdue === 3">包年</label>
                            <label v-if="child.beOverdue === 2">包月</label>
                        </div>

                    </el-col>
                    <el-col :span="4">
                        <div class="vertical">
                            <label>&yen;{{child.detaiPrice}}</label>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="vertical">
                            <label>{{child.payCount}}</label>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="vertical">
                            <label class="sum">
                                &yen;<span>{{child.projecetPrice}}</span>
                            </label>
                        </div>
                    </el-col>
                </el-row>

                <div class="systemSum">
                    <label>
                        系统合计：
                        <span>&yen; {{list.totalSystem}}</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="totalSum">
            <label>合计</label>
            <label class="price">&yen; {{orderList[0].totalPrice}}</label>
        </div>

        <div class="setOut">
            <el-button type="text" icon="iconfont iconback" @click="$router.push({path:'/cart'})"> 返回购物车</el-button>
            <el-button type="primary" size="small" @click="submitOrder">提交订单</el-button>
        </div>
    </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
